<template>
  <div class="login">
    <div class="avatar">
      <img src="../../../assets/login.jpg" alt="" />
    </div>

    <div>
      <div v-if="showModal" @click="showModal = false"></div>
      <div class="pop" v-if="showModal">
        <div class="buttons_1">
          <van-icon name="cross" size="40px" color="#999999" @click="close" />
        </div>

        <van-cell-group inset>
          <!-- 输入任意文本 -->
          <!-- <van-field v-model="text" placeholder="用户名/手机/邮箱" /> -->
          <van-field
            v-model="tel"
            required
            placeholder="请输入手机号"
            class="phone"
            @blur="yanzhengPhone"
          />
          <!-- 密码 -->
          <!-- <van-field v-model="password" type="password" placeholder="密码" /> -->
          <van-field
            v-model="password"
            type="password"
            placeholder="请输入6-8位密码"
            required
            @blur="yanzhengPassword"
          />
        </van-cell-group>

        <van-row justify="center">
          <van-col span="12"
            ><van-button plain type="primary" size="small" color="red"
              >忘记密码</van-button
            ></van-col
          >
          <van-col span="10">
<!-- <<<<<<< HEAD
            <van-button plain type="primary" size="small" color="red"
            @click="sureLogin"
======= -->
            <van-button
              plain
              type="primary"
              size="small"
              color="red"
              @click="sureLogin"
              >登录</van-button
            ></van-col
          >
        </van-row>
      </div>

      <div class="doubleBtn" v-if="btnView">
        <button @click="login" class="btn1">登录</button>
        <button class="btn2" @click="goback()">注册</button>
      </div>
    </div>

    <!-- 第三方登录 -->
    <van-row justify="space-between">
      <van-col span="24">第三方登录</van-col>
    </van-row>

    <div class="icon">
      <span class="span1 iconfont icon-11qq"></span>
      <span class="span2 iconfont icon-weixin"></span>
    </div>
  </div>
</template>

<script>
import { Notify } from "vant";
import { getLogin } from "../../../api/index";
export default {
  data() {
    return {
      showModal: false,
      btnView: true,
      tel: "",
      password: "",
    };
  },
  components: {
    [Notify.Component.name]: Notify.Component,
  },
  methods: {
    login() {
      this.showModal = true;
      this.btnView = false;
    },
    close() {
      this.showModal = false;
      this.btnView = true;
    },
    goback() {
      this.$router.replace({ name: "zc" });
    },
    // 验证手机号
    yanzhengPhone() {
      if (
        !/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
          this.tel
        )
      ) {
        Notify({ type: "warning", message: "手机号格式错误" });
        console.log(111);
      }
    },
    yanzhengPassword() {
      if (!/\w{3,8}/.test(this.password)) {
        Notify({ type: "warning", message: "密码必须是3到8位的字母或数字" });
      }
    },
    // 点登录
    async sureLogin() {
      // 1.发送请求
      let paramObj = { name: this.tel, password: this.password };
      // console.log(paramObj);
      let {
        data: {
          data:{token,userId},
          meta: { status, msg },
        },
      } = await getLogin(paramObj);
      // 2.请求未成功，弹框请求失败
      if (status != 200) return Notify({ type: "warning", message: msg });
      // 3.登录成功，弹框，并存入token,存入username,存入userid
      Notify({ type: "success", message: "登录成功" });
      this.$store.commit("setToken", token); //vuex
      this.$store.state.username = this.tel;
      this.$store.state.userId = userId ;
      // 4.跳转到登录页面
      this.$router.replace({ name: "home" });
    },
  },
};
</script>

<style scoped lang="less">
.login {
  position: fixed;
  width: 100%;
  height: 100%;
  .avatar {
    img {
      height: 600px;
    }
  }
  .btn1,
  .btn2 {
    border: 3px solid #ff5654;
    width: 600px;
    text-align: center;
    height: 100px;
    border-radius: 5px;
    margin: 130px 0 0 70px;
    background-color: #fff;
    color: red;
    font-size: 30px;
  }
  .pop {
    height: 570px;
    width: 650px;
    margin: 0px 50px;
    margin-top: 300px;
    position: absolute;
    z-index: 2;
    top: 164px;
    box-shadow: 1px 1px 30px 8px #ffdedf;
    background-color: #fff;
    .buttons_1 {
      text-align: right;
    }
    .van-icon-cross:before {
      content: "\e6a7";
      font-size: 50px;
      margin-right: 17px;
    }

    .van-cell-group--inset {
      padding-top: 20px;
    }

    /deep/ .van-field__control {
      font-size: 35px;
      background-color: #e6e6e6;
      text-indent: 50px;
      height: 90px;
      width: 550px;
      margin: 0 20px 35px 20px;
      //   margin-bottom: 35px;
      border-radius: 10px;
    }
    .van-cell-group--inset {
      margin: 0;
    }
    .van-field {
      padding: 10px 26px;
    }
    .van-button--primary {
      width: 260px;
      height: 90px;
      margin: 20px 30px;
      border-radius: 10px;
    }
    .van-button__content {
      font-size: 28px;
    }
  }
  .van-row {
    .van-col--24 {
      margin: 0 auto;
      margin-top: 530px;
      text-align: center;
    }
    .van-col {
      text-align: center;
      color: #ff5555;
      font-size: 30px;
      margin-bottom: 20px;
      .van-hairline--top {
        margin-left: 40px;
      }
    }
  }
  .icon {
    width: 100px;
    height: 100px;
    .span1 {
      font-size: 65px;
      color: #ff5555;
      margin: 0px 0 0 290px;
      //   padding: 0 20px;
    }
    .span2 {
      font-size: 70px;
      color: #ff5555;
      margin: 0px 0 0 40px;
      //   padding: 0 20px;
    }
  }
}
</style>